<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Aizen
  Date: 2021/12/3
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花礼网后台管理系统-商品列表</title>
    <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="css/Top.css">
    <link rel="stylesheet" href="css/Left.css">
    <link rel="stylesheet" href="css/commodityList.css">
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }


        .fileimg{
            width: 150px;
            height: 150px;
            opacity: 0;
            z-index: 20;
            position: absolute;
            top: 0px;
        }
        .fileimgclass{
            border: 1px solid black;
            width: 150px;
            height: 150px;
            position: relative;
            font-size: 140px;
            text-align: center;
            line-height: 150px;
            color: #00000090;
        }

        .fileBox{
            /*border: 1px solid red;*/
            width: 100%;
        }
        .fileBox:after{
            content: "";
            display: block;
            clear: both;
        }
        .fileBox>*{
            margin-right: 5px;
            float: left;
        }


    </style>
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-2 stick"><%@include file="Left.jsp"%></div>
        <div class="col-md-10 col-md-offset-2"><%@include file="Top.jsp"%></div>
        <div class="col-md-10 col-md-offset-2">
            <c:set value="${requestScope.c}" var="co"></c:set>
            <form class="form-horizontal" action="manager/updateCommodityClassServlet.shtml" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id" value="${co.id}">
                <div class="form-group">
                    <label class="col-sm-2 control-label">分类名称</label>
                    <div class="col-sm-10">
                        <input type="text" name="className" class="form-control" maxlength="10" value="${co.name}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">隶属类别</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="pId" id="class">
                            <option value="0" type="1">无(添加为一级类别)</option>
                            <option value="" disabled>《《《一级分类》》》</option>
                            <c:forEach items="${requestScope.classList}" var="c">
                                <c:if test="${c.type==1&&c.id!=co.id}">
                                    <option value="${c.id}" type="1">${c.name}</option>
                                </c:if>
                            </c:forEach>
                            <option value="" disabled>《《《二级分类》》》</option>
                            <c:forEach items="${requestScope.classList}" var="c">
                                <c:if test="${c.type==2&&c.id!=co.id}">
                                    <option value="${c.id}" type="2">${c.name}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">指向链接</label>
                    <div class="col-sm-10">
                        <input type="text" value="${co.ahref}" name="classHref" class="form-control" placeholder="例：index.shtml">
                    </div>
                </div>



                <div class="form-group" id="classImg" hidden="hidden">
                    <label class="col-sm-2 control-label">分类图片</label>
                    <div class="col-sm-10">
                        <c:if test="${co.image!=''}">
                            <input type="hidden" name="image" value="${c.image}">
                            <img src="${co.image}" alt="" height="160px" id="image">
                            <label>点击图片可删除</label>
                        </c:if>
                        <div class="fileBox">
                            <div class="fileimgclass">+
                                <input type="file" name="classImage" class="fileimg" style="float: left">
                            </div>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <a href="manager/commodityClassServlet?pageNo=${requestScope.pageNo}"><button type="button" class="btn btn-default">取消</button></a>
                    </div>
                </div>



            </form>
        </div>
    </div>
</div>
</body>
<script>
    $(function (){
        //左侧‘分类管理’变红
        $("#ul li:nth-child(5) a").css("color","red");
        $("#let").html("分类管理");

        //隶属分类改变事件
        $("#class").change(function (){
            let val = $(this).val();
            let ele = $(this).children("option[value="+val+"]");
            let type = ele.attr("type");
            if(type=="2"){
                $("#classImg").show();
            }else{
                $("#classImg").hide();
            }
        })

        $("#image").click(function (){
            $(this).prev().remove();
            $(this).remove();
        })




        $("#class").val(${c.pid});
        let val = $("#class").val();
        let ele = $("#class").children("option[value="+val+"]");
        let type = ele.attr("type");
        if(type=="2"){
            $("#classImg").show();
        }else{
            $("#classImg").hide();
        }





        $('.fileimg').change(function(e){
            $(this).parent().parent().children("img").remove();
            let fileMsg = e.currentTarget.files;
            for (let i = 0; i < fileMsg.length; i++) {
                let fileName = fileMsg[i].name;
                //类型
                let fileType = fileMsg[i].type;
                console.log(fileType);
                // 判断文件类型
                let type=(fileType.substr(fileType.lastIndexOf("/"))).toLowerCase();
                console.log(type);
                if(type!="/jpg"&&type!="/gif"&&type!="/jpeg"&& type!="/png"){
                    alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
                    return false;
                }
                let img = $("<img id='im' src='' alt='' style='width: 150px;height: 150px;float: left'>");
                $(img).attr("src","image/commodity/"+fileName);
                $(this).parent().parent().append(img);
            }
        })




    })
</script>
</html>
